<template>
	<view class="list">
		<view class="item" v-for="(item,index) in list" :key="index">
			<view class="fs-36 color333">身体健康数据</view>
			<view class="color666 fs-28 mt20">提交时间：{{ item.add_time }}</view>
			<view class="bor-bot mt30"></view>
			<view class="acea-row row-right mt30">
				<view class="btn cancel" @click="delect(item)">删除数据</view>
				<view class="btn confirm ml30" @click="edit(item)">编辑数据</view>
			</view>
		</view>
		
		<block v-if="list.length==0">
			<view class="kong">
				<view class="acea-row row-middle row-center none-t">
					<text class="fs-32 color666">暂无更多数据~</text>
				</view>
			</view>
			<view class="add" @click.stop="update">点击添加健康记录</view>
		</block>
		
		<view class="footer">
			<view class="update" @click.stop="update">更新身体健康数据</view>
		</view>
		<view style="width: 100%;height: 200rpx;"></view>
		
	</view>
</template>

<script>
	import{
		jianList,
		orderdel
	} from '@/api/admin.js'
	export default {
		data() {
			return {
				page:1,
				limit:10,
				list:[],
				loadend: false,
				loading: false,
				loadTitle: this.$t(`加载更多`),
			};
		},
		onShow() {
			this.page = 1;
			this.list = [];
			this.loadend = false;
			this.loading = false;
			this.getlist();
		},
		methods:{
			update(){
				uni.navigateTo({
					url: '/pages/answer/topic'
				})
			},
			delect(item){
				let that = this;
				uni.showModal({
					title: '提示',
					content: '是否删除该健康数据？',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							orderdel({ id: item.id }).then(res=>{
								that.$util.Tips({ title : res.msg },()=>{
									that.page = 1;
									that.list = [];
									that.loadend = false;
									that.loading = false;
									that.getlist();
								})
							}).catch(err=>{
								that.$util.Tips({ title : err })
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			edit(item){
				uni.navigateTo({
					url: '/pages/answer/topic?id=' + item.id
				})
			},
			getlist(){
				let that = this;
				if (that.loadend) return;
				if (that.loading) return;
				that.loading = true;
				that.loadTitle = '';
				jianList({ page:that.page,limit:that.limit }).then(res=>{
					let list = res.data.data;
					let arr = that.$util.SplitArray(list, that.list);
					let loadend = list.length < that.limit;
					that.loadend = loadend;
					that.loading = false;
					that.loadTitle = loadend ? that.$t(`没有更多内容啦~`) : that.$t(`加载更多`);
					that.$set(that, 'list', arr);
					that.$set(that, 'page', that.page + 1);
				}).catch(err=>{
					that.loading = false;
					that.loadTitle = that.$t(`加载更多`);
				})
			},
		},
		onReachBottom() {
			this.getlist();
		}
	}
</script>

<style lang="scss">
	.list{
		
		.item{
			width: 100%;
			background-color: #ffffff;
			padding:  30rpx 50rpx;
			margin-bottom: 30rpx;
			
			.btn{
				width: 196rpx;
				height: 52rpx;
				text-align: center;
				line-height: 52rpx;
				border-radius: 26rpx;
				font-size: 22rpx;
				
				&.cancel{
					background: rgba(176, 176, 176, 0.3);
					color: #9E9E9E;
				}
				&.confirm{
					background: rgba(253, 125, 54, 0.3);
					color: #FD7D36;
				}
			}
			
		}
		
		.kong{
			width: 520rpx;
			height: 520rpx;
			background-image: url('https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/none-icon.png');
			background-size: 100% 100%;
			margin: 30rpx auto;
			position: relative;
			
			.none-t{
				width: 100%;
				color: #888888;
				font-size: 34rpx;
				position: absolute;
				bottom: -20rpx;
				left: 0;
				right: 0;
			}
		}
		
		.add{
			background: rgba(253, 125, 54, 0.2);
			width: 690rpx;
			height: 126rpx;
			text-align: center;
			line-height: 126rpx;
			color: #FD7D36;
			font-size: 36rpx;
			border-radius: 63rpx;
			margin: 50rpx auto;
		}
		
		.footer{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			width: 100%;
			z-index: 999;
			background-color: #ffffff;
			
			.update{
				background: rgba(253, 125, 54, 0.2);
				width: 690rpx;
				height: 126rpx;
				text-align: center;
				line-height: 126rpx;
				color: #FD7D36;
				font-size: 36rpx;
				border-radius: 63rpx;
				margin: 30rpx auto;
			}
			
		}
		
		
	}
</style>
